<template>
	<uni-popup ref="popUpRef" type="bottom" background-color="#fff">
		<view class="popup-header">
			<view class="cancel" @click="selectAccountBookCancel">
				取消
			</view>
			<view class="cancel">
				选择账本
			</view>
			<view class="sure" @click="selectAccountBookOk">
				确定
			</view>
		</view>
		<view class="accounts">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view v-for="i in books" class="books" @click="()=> selectBook(i)">
					<image class="list-item-image" mode="aspectFill" :src="i.img"></image>
					<uni-icons class="select-icon" v-show="i.selected" type="checkbox-filled" size="25"></uni-icons>
					<view class="list-item">
						<view class="list-item-top">
							<text class="name">{{i.name}}</text>
							<!-- <uni-icons type="compose" size="35" color="#fff"></uni-icons> -->
						</view>
						<view class="account">累计：{{i.sumPen}}笔</view>
						<text> <text>总支出：{{i.totalExpenditure}} </text> &emsp;<text>总收入：{{i.generalIncome}}</text>
						</text>
					</view>

				</view>
			</scroll-view>
		</view>
		<view class="save-btn" @click="()=>addAccountBook('addAccountBook')">
			<text class="save-btn-text"> 新增账本</text>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { accountBookApi } from "@/apis/apis"
	import { userStore } from '@/store/user'

	const addAccountBook = (type : string) => {
		uni.navigateTo({
			url: `/pages/accountBook/${type}/${type}`
		})
		popUpRef.value.close()
	}

	const props = defineProps({
		accountName: {
			type: String,
			default: ''
		}
	})
	// 选择账本
	const books = ref([
		{
			name: '默认账本1', sumPen: '7', totalExpenditure: '0.00'
			, generalIncome: '0.00', img: '../../static/image/account-bg.jpg',
			selected: false
		},
		{
			name: '默认账本2', sumPen: '7', totalExpenditure: '0.00'
			, generalIncome: '0.00', img: '../../static/image/account-bg.jpg',
			selected: false
		}
	])

	const popUpRef = ref(null)

	// 初始化请求账本
	const getAccountBook = async () => {
		const res : any = await accountBookApi.queryPageUsingPOST({})
		console.log(res);
		res.data.records.forEach((item : { selected : boolean }) => item.selected = false)
		books.value = res.data.records


		books.value.forEach((item : any) => item.selected = item.name === props.accountName)
		popUpRef.value.open()
	}
	const selectAccountBook = () => {
		getAccountBook()
	}

	defineExpose({ selectAccountBook })

	const selectAccountBookCancel = () => {
		popUpRef.value.close()
	}

	const emit = defineEmits(['selectAccountBookOk'])

	const selectAccountBookOk = () => {

		selectAccountBookCancel()

		userStore.setCurrentBook(books.value.find(item => item.selected))
		emit('selectAccountBookOk', books.value.find(item => item.selected))
	}
	const selectBook = (e : any) => {
		books.value.forEach((item : any) => item.selected = false)
		e.selected = true
	}
</script>


<style lang="scss" scoped>
	.popup-header {
		padding: 10px;
		display: flex;
		justify-content: space-between;
		padding-bottom: 10px;
	}

	.accounts {
		padding: 10px 10px 100px;
		height: 40vh;
		overflow-y: scroll;

		.scroll-Y {
			height: 95%;
		}

		.books {
			// width: 100%;
			margin: 0 auto 10px;
			padding: 10px;
			/* 关键定位 */
			position: relative;

			/* 防止图片溢出 */
			overflow: hidden;
			z-index: 1;

			.select-icon {
				position: absolute;
				top: 2px;
				right: 2px;
			}

			.list-item-image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			.list-item {
				width: 100%;
				color: #000;

				.list-item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 20px;
					}
				}

				.account {
					margin-bottom: 5px;
				}
			}
		}


	}

	.save-btn {
		bottom: 60px;
	}
</style>